<template>
  <div class="color-selector-container">
    <span
      v-for="(c,i) in candidateColors"
      :key="i"
      :class="'color-selector color-' + i"
      @click="selectColor(i)"
      :style="'background-color:'+c"
    >
      <faicon icon="check"></faicon>
    </span>
  </div>
</template>

<script>
export default {
  props: ["value", "candidateColors"],
  mounted() {
      this.setActiveTheme('0')
  },
  watch: {
    value() {
      this.setActiveTheme(this.value);
    }
  },
  methods: {
    selectColor(color) {
      this.$emit("input", color);
    },
    setActiveTheme(n) {
      for (let item of this.$el.getElementsByClassName("color-selector")) {
        item.classList.remove("active");
      }
      for (let item of this.$el.getElementsByClassName("color-" + this.value)) {
        item.classList.add("active");
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.color-selector-container
  background-color #fff

  .color-selector
    width 34px
    height 34px
    line-height 32px
    text-align center
    margin-right 16px
    background-color #777
    border 1px solid rgba(0, 0, 0, 0.1)
    border-radius 100%
    display inline-block
    cursor pointer
    color #ed4260

    svg
      opacity 0

  .color-selector.active
    border-color #ed4260

    svg
      opacity 1

/*
  .color-0
    background-color #e9e6d0

  .color-1
    background-color #f7edd4

  .color-2
    background-color #eaf4e9

  .color-3
    background-color #e9f4f6

  .color-4
    background-color #f7e9e8

  .color-5
    background-color #e6e6e6
    */
</style>